<template>
  <el-color-picker v-model="color" />
  <el-button @click="changeLineStyle">虚线 实现切换</el-button>
  外扩<input
    id="expand-size"
    type="range"
    v-model="cropExpandSize"
    min="0"
    :max="100"
  />
  线宽
  <input id="expand-size" type="range" v-model="lineWidth" min="0" :max="100" />
  <div id="app">
    <!-- 使用 v-for 循环渲染 ImageWithMarks 子组件 -->
    <div
      class="image-container"
      v-for="(imageInfo, index) in images"
      :key="index"
    >
      <ImageWithMarks
        :cropExpandSize="cropExpandSize"
        ref="myCanvas"
        :lineWidth="lineWidth"
        :lineStyle="lineStyle"
        :imageUrl="imageInfo.url"
        :marks="imageInfo.marks"
        :displaySize="imageInfo.displaySize"
        :borderColor="color"
      />
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
import ImageWithMarks from "./ImageWithMarks.vue";
import { ref } from "vue";
const lineStyle = ref("dashed");
const store = useCounterStore();
const { color } = storeToRefs(store);
const myCanvas = ref(null);

const cropExpandSize = ref(0);
const lineWidth = ref(2);
const changeLineStyle = () => {
  lineStyle.value = lineStyle.value === "dashed" ? "solid" : "dashed";
};
// 导入 ImageWithMarks 子组件
const images = ref([
  {
    url: "https://photokit.com/features/images/image-text-after.webp",
    marks: [
      {
        shape_type: "line",
        line: {
          point0: "66.691176,18.408824",
          point1: "66.185294,403.658824",
          point2: "442.347059,403.658824",
          point3: "600.347059,500.658824",
          point4: "800.347059,18.658824",
          point4: "900.347059,403.658824",
        },
      },
    ],
    borderColor: "yellow",
  },
  {
    url: "https://pic.616pic.com/phototwo/00/07/67/619766a57f5df3279.jpg",
    marks: [
      {
        shape_type: "polygon",
        polygon: {
          point0: "66.691176,18.408824",
          point1: "66.185294,403.658824",
          point2: "442.347059,403.658824",
          point3: "600.347059,500.658824",
          point4: "800.347059,18.658824",
          point4: "900.347059,403.658824",
        },
      },
    ],
    borderColor: "yellow",
  },
  {
    url: "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg",
    marks: [
      {
        shape_type: "curve",
        line: {
          point0: "200.417647,300",
          point1: "200.826471,500",
          point2: "152.838235,134.152941",
          point3: "300.838235,300.152941",
          point3: "300,200",
          point3: "500,600",
          point3: "900,600",
        },
      },
    ],
    borderColor: "yellow",
  },
  {
    url: "https://pic.616pic.com/bg_w1180/00/00/37/RuNqtb2Qcz.jpg",
    marks: [{ shape_type: "rect", rect: "100,100,500,500" }],
    borderColor: "yellow",
  },
  {
    url: "https://img.88tph.com/b1/2f/sS9BmhPREe2aFwAWPgWqLw-1.jpg!/watermark/url/L3BhdGgvbG9nby5wbmc/align/center/fw/640/quality/70",
    marks: [{ shape_type: "circle", center: "350,250", radius: "100" }],
    borderColor: "yellow",
  },
  {
    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnHP2mZBoVjz1_nSk1D-Cf2m10XwQubxJ3Aw&s",
    marks: [
      {
        shape_type: "rect_line_combination",
        rect: "40.705882,90.111765,70.582353,30.670588",
        rect_in: {
          point0: "60.094118,90.211765",
          point1: "20.726471,70.035294",
          point2: "80.570588,50.352941",
          point3: "40.511765,40.558824",
        },
      },
    ],
    borderColor: "yellow",
  },
]);
</script>

<style>
#app {
  display: flex;
  flex-wrap: wrap;
}
.image-container {
  margin: 5px;
}
</style>
